<template>
  <div>
    <scroller :show-scrollbar="false">

      <div class="flex-row td-row mb-1">
        <text class="td-text text-muted td-static">症状描述</text>
        <text class="td-text">{{register.drug_des}}</text>
      </div>

      <div class="flex-row td-row">
        <text class="td-text flex td-br">药品名称</text>
        <text class="td-text flex td-br">规格型号</text>
        <text class="td-text flex">数量</text>
      </div>

      <vm-status v-if="showDrugStatus"
                 :show-icon="false"
                 class="bg-white"
                 empty-text="无当药品信息"></vm-status>

      <div v-else>
        <div v-for="(drug, index) in drugs"
             :key="index">
          <div class="td-row bg-white">
            <text class="td-text td-gray flex td-br">{{drug.product_name}}</text>
            <text class="td-text td-gray flex td-br">{{drug.spec_name}}</text>
            <text class="td-text td-gray flex">{{drug.drug_num}}</text>
          </div>
          <div class="p-1 bg-white pl-5 mb-1">
            <text class="text text-muted">用法：{{drug.drug_method}}</text>
            <text class="text text-muted">注意事项：{{drug.drug_note}}</text>
          </div>
        </div>
      </div>

      <div class="td-row">
        <text class="td-text flex td-br">鸡舍号</text>
        <text class="td-text flex td-br">用药时间</text>
        <text class="flex text-td">用药确认</text>
      </div>

      <vm-status v-if="showStatus"
                 :show-icon="false"
                 class="bg-white"
                 empty-text="无当前任务的鸡舍信息"></vm-status>
      <div v-else>
        <div v-for="(house, index) in houses"
             :key="index"
             class="td-row">
          <text class="td-text flex td-br">{{house.house_no}}栋</text>
          <text class="td-text flex td-br">{{house.drugDate}}</text>
          <div class="py-1 flex">
            <text v-if="viewMode"
                  class="text-td flex">{{enumStatus[house.is_confirm] || '未处理'}}</text>
            <text v-else
                  class="text-td flex text-primary"
                  @click="handleConfirm(index)">确认</text>
          </div>
        </div>
      </div>
    </scroller>
  </div>
</template>
<script>
import VmStatus from '../../components/vm-status.vue'
import {
  STORAGE_FARM
} from '../../plugins/constant'
import { trim } from '../../plugins/utils.js'

export default {
  components: { VmStatus },
  props: {},
  data() {
    return {
      hasFetch: false,
      viewMode: false,
      farm: {},
      task: {},
      register: {},
      drugs: [],
      houses: [],
      enumStatus: {
        0: '否',
        1: '是'
      }
    }
  },
  computed: {
    showStatus() {
      return this.hasFetch && !this.houses.length
    },
    showDrugStatus() {
      return this.hasFetch && !this.drugs.length
    }
  },
  watch: {},
  created() {
    this.getFarm()
  },
  mounted() { },
  methods: {
    getFarm() {
      this.farm = this.$storage.getSync(STORAGE_FARM) || {}
      if (this.farm.id) {
        this.getParams()
      } else {
        this.hasFetch = true
        this.$notice.toast({ message: '没有鸡场信息' })
        this.$router.setBackParams({ type: 1 })
      }
    },
    async getParams() {
      const res = await this.$router.getParams()

      this.viewMode = res && res.viewMode
      this.task = (res && res.task) || {}

      if (!this.task.related_id) {
        this.hasFetch = true
        return this.$notice.toast({ message: '无任务详情' })
      }

      this.getData()
    },
    async getData() {
      // 用药登记
      const [register] = await this.$utils.pm(this.getRegister(true))
      this.register = register

      // 用药登记详情
      const [drugs] = await this.$utils.pm(this.getDrugs())
      this.drugs = drugs

      // 鸡舍列表
      const [houses] = await this.$utils.pm(this.getHouses())
      this.houses = houses

      this.hasFetch = true
    },
    getRegister(showLoading) {
      return new Promise((resolve, reject) => {
        showLoading && this.$notice.loading.show("获取任务...")
        this.$api.getDataById({
          server: 'agr_chain',
          table: 'drug_register',
          id: this.task.related_id,
          errorMsg: '获取数据失败'
        }).then(res => {
          resolve(res || {})
        }).catch(err => {
          reject(err)
        }).finally(() => {
          showLoading && this.$notice.loading.hide()
        })
      })
    },
    getDrugs() {
      return new Promise((resolve, reject) => {
        this.$api.getData({
          server: 'agr_chain',
          table: 'drug_register_detail',
          params: {
            'drug_register_id.eq': this.task.related_id
          },
          errorMsg: '获取数据失败'
        }).then(res => {
          resolve(res || [])
        }).catch(err => {
          reject(err)
        })
      })
    },
    getHouses() {
      return new Promise((resolve, reject) => {
        this.$api.getData({
          server: 'agr_chain',
          table: 'drug_register_chick_house',
          params: {
            'drug_register_id.eq': this.task.related_id
          },
          errorMsg: '获取数据失败'
        }).then(res => {
          resolve((res || []).map(item => {
            const date = item.drug_date || ''
            item.drugDate = date.substr(0, 10)
            return item
          }))
        }).catch(err => {
          reject(err)
        })
      })
    },
    handleConfirm(index) {
      this.$dialog.show({
        title: '提示',
        content: `确认用药？`,
        positiveText: '是',
        negativeText: '否',
        onPositive: () => {
          this.handleSubmit(index)
        }
      })
    },
    handleSubmit(index) {
      const house = this.houses[index]

      const data = {
        is_confirm: '1',
        drug_date: this.$utils.dateFormat(new Date())
      }

      const id = house.id
      this.updateData(id, data)
    },
    updateData(id, data) {
      this.$api.updateData({
        server: 'agr_chain',
        table: 'drug_register_chick_house',
        id,
        data,
        errorMsg: '修改失败，请重试！'
      }).then(res => {
        this.getData()
        this.$router.setBackParams({ type: 3 })
      })
    }
  }
}
</script>
<style lang="scss" scoped>
@import "../../css/variables.scss";

.icon {
  font-family: alicon;
}
.flex-row {
  flex-direction: row;
}
.flex {
  flex: 1;
}
.flex-2 {
  flex: 2;
}
.text-muted {
  color: #999;
}
.td-gray {
  color: #444;
}
.text-td {
  font-size: 25px;
  text-align: center;
}
.text {
  font-size: 25px;
}
.text-primary {
  color: $primary;
}
.bg-white {
  background-color: #fff;
}

.pl-5 {
  padding-left: 50px;
}
.p-1 {
  padding: 5px;
}
.py-1 {
  padding-top: 10px;
  padding-bottom: 10px;
}
.pr-1 {
  padding-right: 10px;
}
.mb-1 {
  margin-bottom: 10px;
}
.mt-1 {
  margin-top: 10px;
}

.td-row {
  width: 750px;
  flex-direction: row;
  align-items: center;
  background-color: #fff;
  border-bottom-width: 1px;
  border-bottom-color: $border-color;
}
.td-text {
  text-align: center;
  font-size: 25px;
  padding-top: 20px;
  padding-bottom: 20px;
}
.td-br {
  border-right-width: 1px;
  border-right-color: $border-color;
}
.td-serial {
  width: 80px;
  text-align: center;
  font-size: 25px;
}
.td-static {
  width: 120px;
}

.input {
  flex: 1;
  border-width: 1px;
  border-color: $border-color;
  height: 60px;
  line-height: 60px;
  text-align: center;
  font-size: 26px;
  padding-left: 10px;
  padding-right: 10px;
  tint-color: #999;
}
.unit-text {
  font-size: 26px;
  background-color: $border-color;
  height: 60px;
  line-height: 60px;
  padding-left: 10px;
  padding-right: 10px;
  text-align: center;
  color: #666;
  margin-right: 10px;
}
</style>
